<template>
  <div class="view_page userList">
    <el-card class="box-card">
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <!--左侧-->
        <div class="left">
          <div class="menu-title">
            设备类型
          </div>
        </div>
        <!--右侧-->
        <div class="right">
          <!--          <el-button type="primary" size="small" @click="navtoAdd('add')"-->
          <!--            >新增-->
          <!--          </el-button>-->
        </div>
      </div>
      <!-- 卡片内容 -->
      <div>
        <!--筛选-->
        <div class="query-operate">
          <el-form
            class="demo-form-inline indoor-scene-buzhou-list-form"
            :inline="true"
            :model="TESTFROMDATA"
            @submit.native.prevent
          >
            <el-form-item
              label="设备类型名称"
              label-width="120px"
              style="margin-top: 5px; margin-bottom: 5px;"
            >
              <el-input
                clearable
                @clear="searchList"
                v-model="TESTFROMDATA.title"
                placeholder="请输入设备类型名称"
                @keyup.native.enter="searchList()"
              ></el-input>
            </el-form-item>
            <el-form-item
              style="margin-top: 5px; margin-bottom: 5px;margin-left: 10px;"
            >
              <el-button type="primary" @click="searchList()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="datalist" style="width: 100%">
          <el-table-column prop="id" label="ID" align="center" min-width="50">
          </el-table-column>
          <el-table-column
            prop="type"
            label="设备类型名称"
            align="center"
            min-width="200"
          >
            <template slot-scope="scope">
              <div>
                {{ approvalstate(scope.row.type) }}
              </div>
            </template>
          </el-table-column>
<!--          <el-table-column
            prop="name"
            label="小分类名称"
            align="center"
            min-width="300"
          >
          </el-table-column>
          <el-table-column
            prop="icon_url"
            label="图标"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.icon_url != ''"
                :src="scope.row.icon_url"
                alt=""
                width="80px"
                height="80px"
                style="object-fit: cover;"
              />
              <img
                v-else
                src="https://dongping.jnaw.top/dongping_static/defaultImg.png"
                alt=""
                width="80px"
                height="80px"
                style="object-fit: cover;"
              />
            </template>
          </el-table-column>-->
          <el-table-column
            prop="bubble_icon_url"
            label="气泡图标"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.bubble_icon_url != ''"
                :src="scope.row.bubble_icon_url"
                alt=""
                class="list_img"
              />
              <img v-else :src="defaultImg" alt="" class="list_img" />
            </template>
          </el-table-column>
          <el-table-column
            prop="unity_bubble_icon0_url"
            label="unity正常气泡图标"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.unity_bubble_icon0_url != ''"
                :src="scope.row.unity_bubble_icon0_url"
                alt=""
                class="list_img"
              />
              <img v-else :src="defaultImg" alt="" class="list_img" />
            </template>
          </el-table-column>
          <el-table-column
            prop="unity_bubble_icon1_url"
            label="unity异常气泡图标"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.unity_bubble_icon1_url != ''"
                :src="scope.row.unity_bubble_icon1_url"
                alt=""
                class="list_img"
              />
              <img v-else :src="defaultImg" alt="" class="list_img" />
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <div style="display: flex;align-items: center;flex-wrap: wrap; ">
                <el-button
                  type="primary"
                  size="small"
                  @click="navtoAdd('update', scope.row.id)"
                  >修改</el-button
                >
                <!--                <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>-->
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <pagination
          :total="total"
          :currentPage="pageNum"
          :pageSize="size"
          position="right"
          @search="searchPagination"
        >
        </pagination>
      </div>
    </el-card>
    <el-dialog
      :title="addtype == 'add' ? '新增设备类型名称' : '修改设备类型名称'"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="form" label-width="180px">
        <el-form-item label="设备类型" :required="true">
          <el-select
            filterable
            v-model="type"
            @change="changeclassEQ"
            placeholder="请选择设备类型"
          >
            <el-option
              v-for="item in typeData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="小分类名称" v :required="true">
          <el-input
            v-model="name"
            maxlength="5"
            placeholder="请输入小分类名称"
          ></el-input>
        </el-form-item>
        <div class="be_careful">注：小分类名称不可超过五个字！</div>

        <el-form-item label="图标配置" :required="true">
          <el-upload
            class="upload-demo"
            ref="upload0"
            :action="uploadUrl"
            :on-preview="handlePreview0"
            :on-remove="handleRemove0"
            :file-list="fileList0"
            :data="uploadData0"
            :before-upload="beforeAvatarUpload0"
            :on-success="handleAvatarSuccess0"
            :on-error="handleAvatarError0"
            :on-exceed="numberExceeded0"
            :auto-upload="true"
            accept=".png,.jpg,.jpeg"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件
            </el-button>
          </el-upload>
          <div>
            <img
              :src="file_image0"
              alt=""
              v-if="file_image0 != '' && file_image0 != null"
              style="width: 100px; object-fit: cover;margin-top: 5px;"
            />
          </div>
        </el-form-item>
        <el-form-item label="气泡图标配置" :required="true">
          <el-upload
            class="upload-demo"
            ref="upload1"
            :action="uploadUrl"
            :on-preview="handlePreview1"
            :on-remove="handleRemove1"
            :file-list="fileList1"
            :data="uploadData1"
            :before-upload="beforeAvatarUpload1"
            :on-success="handleAvatarSuccess1"
            :on-error="handleAvatarError1"
            :on-exceed="numberExceeded1"
            :auto-upload="true"
            accept=".png,.jpg,.jpeg"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件
            </el-button>
          </el-upload>
          <div>
            <img
              :src="file_image1"
              alt=""
              v-if="file_image1 != '' && file_image1 != null"
              style="width: 100px; object-fit: cover;margin-top: 5px;"
            />
          </div>
        </el-form-item>
        <el-form-item label="unity正常气泡图标配置" :required="true">
          <el-upload
            class="upload-demo"
            ref="upload2"
            :action="uploadUrl"
            :on-preview="handlePreview2"
            :on-remove="handleRemove2"
            :file-list="fileList2"
            :data="uploadData2"
            :before-upload="beforeAvatarUpload2"
            :on-success="handleAvatarSuccess2"
            :on-error="handleAvatarError2"
            :on-exceed="numberExceeded2"
            :auto-upload="true"
            accept=".png,.jpg,.jpeg"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件
            </el-button>
          </el-upload>
          <div>
            <img
              :src="file_image2"
              alt=""
              v-if="file_image2 != '' && file_image2 != null"
              style="width: 100px; object-fit: cover;margin-top: 5px;"
            />
          </div>
        </el-form-item>
        <el-form-item label="unity异常气泡图标配置" :required="true">
          <el-upload
            class="upload-demo"
            ref="upload3"
            :action="uploadUrl"
            :on-preview="handlePreview3"
            :on-remove="handleRemove3"
            :file-list="fileList3"
            :data="uploadData3"
            :before-upload="beforeAvatarUpload3"
            :on-success="handleAvatarSuccess3"
            :on-error="handleAvatarError3"
            :on-exceed="numberExceeded3"
            :auto-upload="true"
            accept=".png,.jpg,.jpeg"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件
            </el-button>
          </el-upload>
          <div>
            <img
              :src="file_image3"
              alt=""
              v-if="file_image3 != '' && file_image3 != null"
              style="width: 100px; object-fit: cover;margin-top: 5px;"
            />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { Message } from "element-ui";
import pagination from "@/components/common/pagination/pagination";
import devConfig from "*/dev.config";

export default {
  components: {
    pagination
  },
  watch: {},
  data() {
    return {
      // userInfo: this.$apis.getqxbutton("设备分类"),
      // userInfo_id: JSON.parse(
      //   localStorage.getItem(this.$apis.getLocalKey().loginPersonnelInformation)
      // ).data.id,
      // 筛选内容
      defaultImg: "https://dongping.jnaw.top/dongping_static/defaultImg.png",
      TESTFROMDATA: {
        title: ""
      },
      dialogVisible: false, //添加栏目弹框
      addtype: "", //类型 新增-修改
      name: "", //设备分类名称
      itemID: "", //修改的id
      typeData: [
        {
          id: 1,
          name: "引水设备"
        },
        {
          id: 2,
          name: "传感设备"
        },
        {
          id: 3,
          name: "其他设备"
        }
      ], //设备类型
      type: "",

      // 列表的数据
      datalist: [],
      pageNum: 1,
      page: 1,
      size: 10,
      total: 0,

      // uploadUrl: this.$apis.getUploadUrl() + "/file/upload", //上传地址
      uploadUrl: "https://dongping.jnaw.top/smxc/file/upload",
      liveData: {
        icon: "",
        bubble_icon: "",
        unity_bubble_icon0: "",
        unity_bubble_icon1: ""
      },

      file_id0: "",
      fileList0: [],
      file_image0: "",
      uploadData0: {
        type: 1 //没用
      },

      file_id1: "",
      fileList1: [],
      file_image1: "",
      uploadData1: {
        type: 1 //没用
      },

      file_id2: "",
      fileList2: [],
      file_image2: "",
      uploadData2: {
        type: 1 //没用
      },

      file_id3: "",
      fileList3: [],
      file_image3: "",
      uploadData3: {
        type: 1 //没用
      }
    };
  },
  created() {
    this.getListPage();
  },
  mounted() {},
  methods: {
    // 类型
    approvalstate(item) {
      switch (item) {
        case 1:
          return "引水设备";
          break;
        case 2:
          return "传感设备";
          break;
        case 3:
          return "其他设备";
          break;
        default:
          break;
      }
    },
    //查询列表
    getListPage() {
      var _this = this;
      var datas = {
        name: _this.TESTFROMDATA.title,
        page: _this.page,
        size: _this.size
      };
      _this.$apis.equipment_type_list(datas).then(res => {
        if (res.result == 0) {
          _this.datalist = res.data;
          _this.total = res.rows;
          _this.pageNum = res.page;
        }
      });
    },
    //模糊查询
    searchList() {
      this.page = 1;
      this.datalist = [];
      this.getListPage();
    },
    //分页
    searchPagination(page) {
      this.page = page;
      localStorage.setItem("page", page);
      this.getListPage();
    },
    changeclassEQ(val) {
      // console.log(val);
    },
    initData() {
      this.liveData = {
        icon: "",
        bubble_icon: "",
        unity_bubble_icon0: "",
        unity_bubble_icon1: ""
      };
      this.fileList0 = [];
      this.file_image0 = "";
      this.file_id0 = "";

      this.fileList1 = [];
      this.file_image1 = "";
      this.file_id1 = "";

      this.fileList2 = [];
      this.file_image2 = "";
      this.file_id2 = "";

      this.fileList3 = [];
      this.file_image3 = "";
      this.file_id3 = "";
    },
    // 打开弹窗
    navtoAdd(type, item) {
      var _this = this;
      if (type == "add") {
        _this.addtype = "add";
        _this.dialogVisible = true;
        _this.name = "";
        _this.type = "";
      } else {
        _this.initData();
        _this.itemID = item;
        _this.addtype = "updata";
        var datas = {
          id: item
        };
        _this.$apis.equipment_type_query(datas).then(res => {
          if (res.result == 0) {
            _this.liveData = {};
            _this.name = res.data.name;
            _this.type = res.data.type;
            _this.liveData = res.data;
            _this.dialogVisible = true;
            // console.log(res.data, _this.liveData)
            if (
              _this.liveData.icon != "" &&
              _this.liveData.icon != undefined &&
              _this.liveData.icon != null
            ) {
              this.fileList0 = [
                {
                  id: _this.liveData.icon,
                  name: _this.liveData.icon_name,
                  url: _this.liveData.icon_url
                }
              ];
              this.file_image0 = _this.liveData.icon_url;
              this.file_id0 = _this.liveData.icon;
            }
            if (
              _this.liveData.bubble_icon != "" &&
              _this.liveData.bubble_icon != undefined &&
              _this.liveData.bubble_icon != null
            ) {
              this.fileList1 = [
                {
                  id: _this.liveData.bubble_icon,
                  name: _this.liveData.bubble_icon_name,
                  url: _this.liveData.bubble_icon_url
                }
              ];
              this.file_image1 = _this.liveData.bubble_icon_url;
              this.file_id1 = _this.liveData.bubble_icon;
            }
            if (
              _this.liveData.unity_bubble_icon0 != "" &&
              _this.liveData.unity_bubble_icon0 != undefined &&
              _this.liveData.unity_bubble_icon0 != null
            ) {
              this.fileList2 = [
                {
                  id: _this.liveData.unity_bubble_icon0,
                  name: _this.liveData.unity_bubble_icon0_name,
                  url: _this.liveData.unity_bubble_icon0_url
                }
              ];
              this.file_image2 = _this.liveData.unity_bubble_icon0_url;
              this.file_id2 = _this.liveData.unity_bubble_icon0;
            }
            if (
              _this.liveData.unity_bubble_icon1 != "" &&
              _this.liveData.unity_bubble_icon1 != undefined &&
              _this.liveData.unity_bubble_icon1 != null
            ) {
              this.fileList3 = [
                {
                  id: _this.liveData.unity_bubble_icon1,
                  name: _this.liveData.unity_bubble_icon1_name,
                  url: _this.liveData.unity_bubble_icon1_url
                }
              ];
              this.file_image3 = _this.liveData.unity_bubble_icon1_url;
              this.file_id3 = _this.liveData.unity_bubble_icon1;
            }
          }
        });
      }
    },
    //取消
    cancel() {
      this.type = "";
      this.name = "";
      this.dialogVisible = false;
      this.initData();
    },
    save() {
      var _this = this;
      if (this.type == "") {
        Message.warning("请填写设备类型名称");
        return;
      }
      if (this.name == "") {
        Message.warning("请填写小分类名称");
        return;
      }
      var datas = JSON.parse(JSON.stringify(this.liveData));
      datas.type = _this.type;
      datas.name = _this.name;
      if (datas.icon == "" || datas.icon == undefined || datas.icon == null) {
        Message.warning("图标配置不能为空");
        return;
      }
      if (
        datas.bubble_icon == "" ||
        datas.bubble_icon == undefined ||
        datas.bubble_icon == null
      ) {
        Message.warning("气泡图标配置不能为空");
        return;
      }
      if (
        datas.unity_bubble_icon0 == "" ||
        datas.unity_bubble_icon0 == undefined ||
        datas.unity_bubble_icon0 == null
      ) {
        Message.warning("unity正常气泡图标配置不能为空");
        return;
      }
      if (
        datas.unity_bubble_icon1 == "" ||
        datas.unity_bubble_icon1 == undefined ||
        datas.unity_bubble_icon1 == null
      ) {
        Message.warning("unity异常气泡图标配置不能为空");
        return;
      }
      if (_this.addtype == "add") {
        // var datas = {
        //   type: this.type,
        //   name: this.name
        // };
        _this.$apis.equipment_type_add(datas).then(res => {
          if (res.result == 0) {
            Message.success("添加成功");
            this.dialogVisible = false;
            this.getListPage();
          } else {
            this.dialogVisible = false;
            this.getListPage();
          }
        });
      } else {
        datas.id = _this.itemID;
        // var datas = {
        //   id: this.itemID,
        //   type: this.type,
        //   name: this.name
        // };

        console.log("修改========", datas);
        _this.$apis.equipment_type_update(datas).then(res => {
          if (res.result == 0) {
            Message.success("修改成功");
            this.dialogVisible = false;
            this.getListPage();
          } else {
            this.dialogVisible = false;
            this.getListPage();
          }
        });
      }
    },
    del(item) {
      var _this = this;
      var datas = {
        id: item.id
      };
      _this
        .$confirm("确定要删除【" + item.name + "】吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          _this.$apis.equipment_type_del(datas).then(res => {
            if (res.result == 0) {
              Message.success("删除成功");
              if (_this.page > 1 && _this.datalist.length <= 1) {
                _this.page = _this.page - 1;
              }
              _this.getListPage();
            }
          });
        })
        .catch(() => {});
    },
    download() {
      window.open("https://xiaoyoushengxue.com/2022051218194530.xlsx");
    },
    downloaddata() {
      var _this = this;

      window.open(
        devConfig.apiPrefix +
          "/excel/user_all_export?user_role=" +
          _this.TESTFROMDATA.type
      );
    },
    //关闭前的回调
    handleClose(done) {
      this.initData();
      this.dialogVisible = false;
    },

    //上传文件
    submitUpload1() {
      this.$refs.upload.submit();
    },
    //文件列表移除文件时的钩子
    handleRemove1(file, fileList) {
      this.fileList1 = fileList;
      this.file_id1 = "";
      this.liveData.bubble_icon = "";
      // if (this.addtype == "add") {
      this.file_image1 = "";
      // } else {
      // 	this.file_image1 = this.qudata.cover_files_url;
      // }
    },

    //点击文件列表中已上传的文件时的钩子
    handlePreview1(file) {
      console.log(file);
    },

    //文件上传成功的钩子
    handleAvatarSuccess1(res, file, fileList) {
      console.log(res);
      this.fileList1 = fileList;
      this.file_id1 = res.data.id;
      this.liveData.bubble_icon = res.data.id;
      this.file_image1 = res.data.url;
      // this.imageUrl = URL.createObjectURL(file.raw)
    },

    //文件上传失败时的钩子
    handleAvatarError1(err, file) {
      Message.error("文件上传失败，请稍后再试");
    },

    //文件超出一个
    numberExceeded1() {
      Message.warning("只能上传一张图片");
    },

    //上传文件之前的钩子
    beforeAvatarUpload1(file) {
      var typeList = ["image/jpeg", "image/png", "image/jpg"];
      // const isJPG = file.type === 'image/jpeg'
      const isJPG = typeList.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.warning("上传图片只能是 JPG或者PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.warning("上传文件大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },

    //上传文件
    submitUpload2() {
      this.$refs.upload.submit();
    },
    //文件列表移除文件时的钩子
    handleRemove2(file, fileList) {
      this.fileList2 = fileList;
      this.file_id2 = "";
      this.liveData.unity_bubble_icon0 = "";
      // if (this.addtype == "add") {
      this.file_image2 = "";
      // } else {
      // 	this.file_image2 = this.qudata.cover_files_url;
      // }
    },

    //点击文件列表中已上传的文件时的钩子
    handlePreview2(file) {
      console.log(file);
    },

    //文件上传成功的钩子
    handleAvatarSuccess2(res, file, fileList) {
      console.log(res);
      this.fileList2 = fileList;
      this.file_id2 = res.data.id;
      this.liveData.unity_bubble_icon0 = res.data.id;
      this.file_image2 = res.data.url;
      // this.imageUrl = URL.createObjectURL(file.raw)
    },

    //文件上传失败时的钩子
    handleAvatarError2(err, file) {
      Message.error("文件上传失败，请稍后再试");
    },

    //文件超出一个
    numberExceeded2() {
      Message.warning("只能上传一张图片");
    },

    //上传文件之前的钩子
    beforeAvatarUpload2(file) {
      var typeList = ["image/jpeg", "image/png", "image/jpg"];
      // const isJPG = file.type === 'image/jpeg'
      const isJPG = typeList.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.warning("上传图片只能是 JPG或者PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.warning("上传文件大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },

    //上传文件
    submitUpload3() {
      this.$refs.upload.submit();
    },
    //文件列表移除文件时的钩子
    handleRemove3(file, fileList) {
      this.fileList3 = fileList;
      this.file_id3 = "";
      this.liveData.unity_bubble_icon1 = "";
      // if (this.addtype == "add") {
      this.file_image3 = "";
      // } else {
      // 	this.file_image3 = this.qudata.cover_files_url;
      // }
    },

    //点击文件列表中已上传的文件时的钩子
    handlePreview3(file) {
      console.log(file);
    },

    //文件上传成功的钩子
    handleAvatarSuccess3(res, file, fileList) {
      console.log(res);
      this.fileList3 = fileList;
      this.file_id3 = res.data.id;
      this.liveData.unity_bubble_icon1 = res.data.id;
      this.file_image3 = res.data.url;
      // this.imageUrl = URL.createObjectURL(file.raw)
    },

    //文件上传失败时的钩子
    handleAvatarError3(err, file) {
      Message.error("文件上传失败，请稍后再试");
    },

    //文件超出一个
    numberExceeded3() {
      Message.warning("只能上传一张图片");
    },

    //上传文件之前的钩子
    beforeAvatarUpload3(file) {
      var typeList = ["image/jpeg", "image/png", "image/jpg"];
      // const isJPG = file.type === 'image/jpeg'
      const isJPG = typeList.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.warning("上传图片只能是 JPG或者PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.warning("上传文件大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },

    //上传文件
    submitUpload0() {
      this.$refs.upload.submit();
    },
    //文件列表移除文件时的钩子
    handleRemove0(file, fileList) {
      this.fileList0 = fileList;
      this.file_id0 = "";
      this.liveData.icon = "";
      // if (this.addtype == "add") {
      this.file_image0 = "";
      // } else {
      // 	this.file_image0 = this.qudata.cover_files_url;
      // }
    },

    //点击文件列表中已上传的文件时的钩子
    handlePreview0(file) {
      console.log(file);
    },

    //文件上传成功的钩子
    handleAvatarSuccess0(res, file, fileList) {
      console.log(res);
      this.fileList0 = fileList;
      this.file_id0 = res.data.id;
      this.liveData.icon = res.data.id;
      this.file_image0 = res.data.url;

      // this.imageUrl = URL.createObjectURL(file.raw)
    },

    //文件上传失败时的钩子
    handleAvatarError0(err, file) {
      Message.error("文件上传失败，请稍后再试");
    },

    //文件超出一个
    numberExceeded0() {
      Message.warning("只能上传一张图片");
    },

    //上传文件之前的钩子
    beforeAvatarUpload0(file) {
      var typeList = ["image/jpeg", "image/png", "image/jpg"];
      // const isJPG = file.type === 'image/jpeg'
      const isJPG = typeList.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.warning("上传图片只能是 JPG或者PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.warning("上传文件大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style>
.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
}

.be_careful {
  color: red;
  margin-left: 180px;
  margin-bottom: 20px;
}

.list_img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
</style>
